<template>
    <el-drawer :title="title" :visible.sync="visible" direction="rtl" size="50%">
        <PermissionsForm ref="realForm" @ok="submitCallback" @close="handleCancel" :disabled="disableSubmit" />
        <span class="dialog-footer" v-if="disableSubmit == false">
            <el-button size="medium" @click="handleCancel">取 消</el-button>
            <el-button size="medium" type="primary" @click="handleOk">保 存</el-button>
        </span>
    </el-drawer>
</template>

<script>
    import PermissionsForm from './PermissionsForm.vue'

    export default {
        name: 'OperationDialog',
        components: {
            PermissionsForm
        },
        data() {
            return {
                title: '角色权限配置',
                width: '1000px',
                visible: false,
                disableSubmit: false,
                url: {
                    add: "/dangerous/dangerousSource/add",
                    edit: "/dangerous/dangerousSource/edit",
                    queryById: "/dangerous/dangerousSource/queryById",
                    hazardousChemicals: {
                        list: '/dangerous/dangerousSource/queryHazardousChemicalsByMainId'
                    },
                }
            }
        },
        methods: {
            add() {
                this.visible = true
                this.$nextTick(() => {
                    this.$refs.realForm.setEditor();
                })
            },
            edit(record) {
                this.visible = true
                this.$nextTick(() => {
                    this.$refs.realForm.edit(record);
                })
            },
            handleOk() {
                this.$refs.realForm.submitForm();
            },
            handleCancel() {
                this.visible = false;
            },
            submitCallback() {
                this.$emit('ok');
                this.visible = false;
            },
        }
    }
</script>

<style scoped>
    .dialog-footer {
        padding: 10px 16px;
        position: absolute;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #e8e8e8;
        text-align: right;
        left: 0;
        background: #fff;
        border-radius: 0 0 2px 2px;
        z-index: 1000001;
    }

</style>
